<template>
  <baseCard title="云资源开通明细"
            :height="height"
            :contentStyle="{ paddingTop: '0rem' }">
    <arco-table :columns="columns"
             :data="tableData"
             :pagination="false"
             :scrollbar="true"
             :scroll="scroll"
             :rowClass="rowClassName"
             :hoverable="true">
      <template #xh="{ record }">
        <span>
          {{ record.xh }}
        </span>
      </template>
      <template #doc_num="{ record }">
        <span>
          {{ record.doc_num }}
        </span>
      </template>
      <template #cloud_platform="{ record }">
        <span>
          {{ record.cloud_platform }}
        </span>
      </template>
      <template #sort="{ record }">
        <span>
          {{ record.sort }}
        </span>
      </template>
      <template #service_category="{ record }">
        <span>
          {{ record.service_category }}
        </span>
      </template>
      <template #service_name="{ record }">
        <span>
          {{ record.service_name }}
        </span>
      </template>
      <template #disposition="{ record }">
        <span>
          {{ record.disposition }}
        </span>
      </template>
      <template #region="{ record }">
        <span>
          {{ record.region }}
        </span>
      </template>
      <template #num="{ record }">
        <span>
          {{ record.num }}
        </span>
      </template>
      <template #service_desc="{ record }">
        <span>
          {{ record.service_desc || '-' }}
        </span>
      </template>
      <template #remark="{ record }">
        <span>
          {{ record.remark|| '-' }}
        </span>
      </template>
    </arco-table>

  </baseCard>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import { getsqbListData } from "@/api/mockApi/application.js";
const props = defineProps({
  height: { type: String, default: "" },
  defaultTabs: { type: String, default: "" },
  chartType: { type: String, default: "init" },
});
const tableData = ref([]);
onMounted(() => {
  getAppList();
});
const defaultTabs = ref("0");

const getAppList = (
  params = {
    process_status: defaultTabs.value,
  }
) => {
  getsqbListData(params).then((res) => {
    tableData.value = res.data || [];
  });
};
const tabOption = [
  { id: "0", name: "全部" },
  { id: "1", name: "告警" },
  { id: "2", name: "提示" },
  { id: "3", name: "正常" },
];

const changeTab = (value) => {
  emit("changeTab", value.id);
};

const scroll = {
  y: "100%",
};

let columns = reactive([
  // {
  //   title: "序号",
  //   slotName: "xh",
  //   align: "center",
  //   width: 60,
  //   ellipsis: true,
  //   tooltip: true,
  //   className: 'custom-header-center',
  // },
  {
    title: "资源开通时间",
    slotName: "doc_num",
    align: "left",
    width: 80,
    ellipsis: true,
    tooltip: true,
    className: 'custom-header-center',
  },
  {
    title: "所属云平台",
    slotName: "cloud_platform",
    align: "left",
    width: 90,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "分类",
    slotName: "sort",
    align: "left",
    width: 70,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "服务类别",
    slotName: "service_category",
    align: "left",
    width: 70,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "服务名称",
    slotName: "service_name",
    align: "left",
    width: 70,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "配置",
    slotName: "disposition",
    align: "left",
    width: 70,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "所在区域",
    slotName: "region",
    align: "left",
    width: 80,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "数量",
    slotName: "num",
    align: "right",
    width: 80,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "服务说明",
    slotName: "service_desc",
    align: "left",
    width: 190,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "备注",
    slotName: "remark",
    align: "left",
    width: 80,
    ellipsis: true,
    tooltip: true,
  },
]);

const rowClassName = (record, index) => {
  if (record.process_status == 2) {
    return "row-warn-status";
  } else if (record.process_status == 1) {
    return "row-danger-status";
  }
  return "";
};

const getCellValue = (value) => {
  var parts = value.split("/");
  parts = parts.map(function (item) {
    return addThousandsSeparator(item);
  });
  return parts.join("/");
};

const emit = defineEmits(["changeTab"]);
</script>

<style lang="less" scoped>
@import url("../../../../assets/style/table.less");
:deep(.arco-table-cell.arco-table-cell-align-left) {
  justify-content: center !important;
}
:deep(.arco-table-cell.arco-table-cell-align-right) {
  justify-content: center !important;
}
:deep(.seamless-scroll) {
  flex: 1;
  overflow: hidden;

  .arco-table-container {
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
  }
}

.auto-scroll-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .vpt-table-header {
    :deep(.arco-table-tfoot) {
      box-shadow: none;
    }

    :deep(.arco-table-body) {
      display: none;
    }
  }

  .vpt-table-wrapper {
    :deep(.arco-table-header) {
      display: none;
    }
  }
}

.name-text {
  display: block;
  width: 1.4rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmbug .vpt-em-red {
  //  color: #f53f3f !important;
}

// .yzbug .vpt-em-organge {
//   color: #ff7d00 !important;
// }

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

:deep(
    .arco-table-hover:not(.arco-table-dragging)
      .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
  ) {
  background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
  background-size: 100% 98% !important;
}

:deep(.arco-table-td) {
  background: #fff !important;
}
</style>
